<template>
  <van-tabbar v-model="active"
              active-color="#07c160"
              :safe-area-inset-bottom='true'
              :zIndex="20"
              @change="changeRouter">
    <van-tabbar-item v-for="(item,index) in tagbar"
                     :key="index">
      <img :src="index==active ? item.active : item.normal"
           alt="">
      <div class="tagbar-name">{{item.name}}</div>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      initRouter: ['/', '/order', '/messages', '/user/collection', '/user/self'],
      tagbar: [{
        name: '首页',
        normal: '/static/nav/shouye.png',
        active: '/static/nav/shouyeActive.png'
      },
      {
        name: '订单',
        normal: '/static/nav/appointment.png',
        active: '/static/nav/appointmentActive.png'
      },
      {
        name: '消息',
        normal: '/static/nav/news.png',
        active: '/static/nav/newsActive.png'
      }, {
        name: '收藏',
        normal: '/static/nav/collection.png',
        active: '/static/nav/collectionActive.png'
      },
      {
        name: '我的',
        normal: '/static/nav/mine.png',
        active: '/static/nav/mineActive.png'
      },]
    }
  },
  mounted () {
    this.active = this.initRouter.indexOf(this.$route.path);
  },
  methods: {
    changeRouter () {
      this.$router.push(this.initRouter[this.active])
    }
  }
}
</script>